<template>
<div style="background-color: #fff;height: 89.8vh;">
  <div id="tool">
    <el-button type="success" @click="newButton">新增</el-button>
    <el-button @click="batchRemove" type="danger">批量删除</el-button>
    <el-button @click="showUpload" type="primary" >导入</el-button>
    <el-button @click="batchOut"  type="primary">导出</el-button>
    <el-divider>
      <el-icon><Search /></el-icon>
    </el-divider>
    <el-row>
          <el-col style="text-align: center" :span="2">字典名</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.dictionariesName" />
          </el-col>
          <el-col style="text-align: center" :span="2">字典索引</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.dictionariesKey" />
          </el-col>
      <el-col style="text-align: center" :span="2">
        <el-button @click="search" type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon><Document /></el-icon>
    </el-divider>
  </div>
  <el-table row-key="dictionariesNo"   :tree-props="{ children: 'subset' }" ref="dictionariesTable" :data="dictionariesData" stripe>
    <el-table-column type="selection" width="55" />
      <el-table-column align="center" prop="dictionariesNo" label="字典编号"  />
      <el-table-column align="center" prop="dictionariesName" label="字典名"  />
      <el-table-column align="center" prop="dictionariesKey" label="字典索引"  />
    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
        <el-button @click="updateButton(scope.row)" type="warning">修改</el-button>
        <el-button @click="removeButton(scope.row.dictionariesNo)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<paging @init="loadTable" v-model:count="count"  v-model:limit="limit"  v-model:page="page"></paging>
</div>

  <el-dialog draggable v-model="dictionariesFormDisplay">
    <dictionaries-form @submitDictionariesForm="submitDictionariesForm" @closeDictionariesForm="closeDictionariesForm" ref="DictionariesFormView"></dictionaries-form>
  </el-dialog>
  <el-dialog draggable v-model="uploadDisplay">
    <upload @batchImport="batchImportDictionaries"></upload>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {batchAddDictionaries, batchOutDictionaries, batchRemoveDictionaries, getAllDictionaries, removeDictionaries, searchDictionaries} from "../../../request/system/DictionariesApi.js";
import {Document, Search} from "@element-plus/icons-vue";
import DictionariesForm from "../../../components/form/system/DictionariesForm.vue";
import {ElMessage} from "element-plus";
import Paging from "../../../components/Paging.vue";
const DictionariesFormView=ref()
const dictionariesData=ref([])
const page=ref(1)
const limit=ref(10)
const count=ref(0)
const dictionariesFormDisplay=ref(true);
const dictionariesTable=ref()
import moment from "moment"
import Upload from "../../../components/upload.vue";
const uploadDisplay=ref(true)
const searchForm =reactive({
  dictionariesName:'',
  dictionariesKey:'',
  page:page.value,
  limit:limit.value
})
const showUpload=()=>{
  uploadDisplay.value=true
}
const loadTable=(newPage,newLimit)=>{
  page.value=newPage
  limit.value=newLimit
  searchForm.page=newPage
  searchForm.limit=newLimit;

  if(              searchForm.dictionariesName=='' &&searchForm.dictionariesKey=='' ){
    init()
  }else {
    search()
  }
}
const search=()=>{
  searchDictionaries(searchForm).then((response)=>{
      dictionariesData.value=response.data
    count.value=response.count
  })
}
const batchImportDictionaries=(files)=>{
  batchAddDictionaries({"dictionariesArray":files}).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("导入成功")
      init();
      uploadDisplay.value=false;
    }
  })
}
const batchOut=()=>{
  let rows=dictionariesTable.value.getSelectionRows()
  if(rows.length>0){
    for (let i = 0; i < rows.length; i++) {
      rows[i]=JSON.stringify(rows[i])
    }
    batchOutDictionaries({dictionariesArray:rows}).then((response)=>{
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'Dictionaries:'+ moment(new Date()).format("yyyy-MM-DD-HH-mm-ss")+'.xls'); // 指定下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      ElMessage.success("导出成功")
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const batchRemove=()=>{
  let rows=dictionariesTable.value.getSelectionRows()
  if( rows.length>0){
    let id=""
    for (let i = 0; i < rows.length; i++) {
    id+=rows[i].dictionariesNo+","
    }
    id=id.substring(0,id.length-1)
    batchRemoveDictionaries(id).then((response)=>{
      if(response.state=="200"){
        ElMessage.success("删除成功")
        init()
      }
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }

  console.log()
}
const init=()=>{
  getAllDictionaries(page.value,limit.value).then(response=>{
  dictionariesData.value=response.data
    count.value=response.count
  })
}
const removeButton=(dictionariesNo)=>{
  removeDictionaries(dictionariesNo).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("删除成功")
      init()
    }
  })
}
const updateButton=(row)=>{
  dictionariesFormDisplay.value=true;
    DictionariesFormView.value.fillForm(row)
}
const submitDictionariesForm=()=>{
    dictionariesFormDisplay.value=false;
  init()
}
const closeDictionariesForm=()=>{
    dictionariesFormDisplay.value=false;
}
const newButton=()=>{
    dictionariesFormDisplay.value=true;
    DictionariesFormView.value.rest(true)


}
onMounted(()=>{
    dictionariesFormDisplay.value=false
  uploadDisplay.value=false
  init();
})
</script>
<style scoped>
#tool{
  background-color: #fff;
  padding: 10px;
}
</style>
